
<template>
<div>
    <!-- 默认按钮 -->
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br>
    <!-- 朴素按钮 -->
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br>
    <!-- 禁用状态 -->
    <!-- 用disabled属性来定义按钮是否可用 -->
    <el-button disabled>禁止使用</el-button>
    <br>
    <!-- 文字按钮 -->
    <!-- 没有边框和背景颜色的按钮 -->
    <el-row>
        <el-button type="text">文字按钮1</el-button>
        <el-button type="text" disabled>文字按钮2</el-button>
    </el-row>
    <br>
    <!-- 图标按钮 -->
    <!-- 加上icon图标即可 -->
    <el-row>
        <el-button icon="el-icon-edit"></el-button>
        <el-button icon="el-icon-delete"></el-button>
        <el-button icon="el-icon-search"></el-button>
    </el-row>
    <br>
    <!-- 按钮组 -->
    <el-row>
        <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
            <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
        <el-button-group>
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-search"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
        </el-button-group>
    </el-row>
    <br>
    <!-- 加载中 -->
    <!-- 要设置loading状态，只要设置loading为true就行 -->
    <el-button type="primary" :loading="true">加载中</el-button>
</div>
</template>



<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() { 
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

<style lang="less" scoped>


</style>